<template>
  <div class="main-wrap">
    <ChapterList
      @changeChapterFlag="changeChapterFlag"
      :chapterFlag="chapterFlag"
    />
    <div class="course-sidebar">
      <CourseSidebar
        :showRight="showRight"
        :chapterFlag="chapterFlag"
        @changeChapterFlag="changeChapterFlag"
      />
    </div>
    <div class="course-center">
      <CourseCenter />
    </div>
    <div :class="['course-right', { active: showRight }]">
      <CourseRight :type="type" :showRight="showRight" />
    </div>
  </div>
</template>
<script>
export default {
  components: {
    CourseSidebar: () => import('./playTop/CourseSidebar.vue'),
    ChapterList: () => import('./playTop/ChapterList.vue'),
    CourseCenter: () => import('./playTop/CourseCenter.vue'),
    CourseRight: () => import('./playTop/CourseRight.vue'),
  },
  data() {
    return {
      type: 1,
      showRight: false,
      chapterFlag: false,
    }
  },
  watch: {
    $route: {
      handler() {
        this.type = 1
        this.showRight = false
        this.chapterFlag = false
      },
    },
  },
  mounted() {
    this.$bus.$on('showCourseRight', (type, flag) => {
      if (this.type == type) {
        this.showRight = !this.showRight
      } else {
        this.showRight = this.type != type
      }
      if (flag != undefined) this.showRight = flag
      this.type = type
    })
  },
  beforeDestroy() {
    this.$bus.$off('showCourseRight')
  },
  methods: {
    changeChapterFlag(flag) {
      this.chapterFlag = flag !== undefined ? flag : !this.chapterFlag
    },
  },
}
</script>
<style scoped lang="scss">
.main-wrap {
  width: 100%;
  height: 840px;
  position: relative;
  background: #1c1f21;
  display: flex;
  border-bottom: 1px solid #eee;
  .course-sidebar {
    z-index: 1000;
    width: 60px;
    height: 100%;
    background: #1c1f21;
  }
  .course-center {
    flex: 1;
    padding-top: 20px;
  }
  .course-right {
    width: 60px;
    height: 100%;
    &.active {
      width: 640px;
    }
  }
}
</style>